// 导入模块
import dataManager, { STORAGE_KEY } from './dataManager.js';
import { showToast, debounce, validateUrl, validateTabName } from './utils.js';
import { renderTabs, renderIcons } from './uiRenderer.js';
import { setupImageUploadEvents, handleDragOver } from './eventHandler.js';
import tabManager from './tabManager.js';
import iconManager from './iconManager.js';
import modalManager from './modalManager.js';
import imageProcessor from './imageProcessor.js';
import dataIO from './dataIO.js';
import dragAndDrop from './dragAndDrop.js';

// 导入CSS文件
import '../css/style.css';

// 常量和状态管理
let currentTab = '首页';
let editingIcon = null;
let iconsToRender = []; // 当前渲染的图标数组，用于ALL页面拖拽索引映射
let data = dataManager.initData(); // 初始化数据

// 将一些变量和函数设置为全局，以便其他模块可以访问
window.currentTab = currentTab;
window.renderAll = renderAll;
window.renderIcons = renderIcons; // 确保renderIcons函数全局可访问
window.openModal = modalManager.openIconModal;
window.showToast = showToast;
window.switchTab = switchTab;
window.showIconOptions = modalManager.showIconOptions;
window.toggleImageUpload = modalManager.toggleImageUpload;
window.data = data; // 使数据对象全局可访问
window.dataManager = dataManager; // 使数据管理器全局可访问
window.iconsToRender = iconsToRender; // 使图标渲染数组全局可访问
// dragSource和dragOverElement现在在dragAndDrop模块中管理

// 切换标签页
function switchTab(tab) {
    if (tab !== currentTab) {
        currentTab = tab;
        renderAll();
    }
}

// 禁用默认右键菜单（但允许图标右键菜单）
document.addEventListener('contextmenu', function(e) {
    // 如果点击的不是图标或图标内的元素，则禁用右键菜单
    if (!e.target.closest('.draggable')) {
        e.preventDefault();
        return false;
    }
}, false);

// 图标右键菜单事件处理
document.addEventListener('click', function(e) {
    // 点击其他地方隐藏右键菜单
    if (!e.target.closest('#icon-context-menu')) {
        document.getElementById('icon-context-menu').style.display = 'none';
    }
    
    // 点击取消按钮隐藏确认删除浮层
    if (e.target.id === 'cancel-delete') {
        document.getElementById('confirm-overlay').style.display = 'none';
    }
    
    // 点击确认删除按钮执行删除操作
    if (e.target.id === 'confirm-delete') {
        if (window.currentIcon) {
            const { index, sourceTab, tab } = window.currentIcon;
            
            // 删除图标
            if (iconManager.deleteIcon(data, sourceTab, index)) {
                if (dataManager.saveData(data)) {
                    renderIcons(data, tab);
                    showToast('删除成功');
                }
            }
            
            // 隐藏确认浮层和右键菜单
            document.getElementById('confirm-overlay').style.display = 'none';
            document.getElementById('icon-context-menu').style.display = 'none';
            window.currentIcon = null;
        }
    }
});

// 编辑图标按钮事件
document.getElementById('edit-icon').addEventListener('click', function() {
    if (window.currentIcon) {
        const { element, index, sourceTab, tab } = window.currentIcon;
        
        // 获取图标数据
        let iconData;
        if (tab === 'ALL') {
            // 在ALL页面，需要从源标签页获取数据
            iconData = data.icons[sourceTab][index];
        } else {
            iconData = data.icons[tab][index];
        }
        
        // 打开编辑模态框
        openModal(iconData, index, sourceTab);
        
        // 隐藏右键菜单
        document.getElementById('icon-context-menu').style.display = 'none';
    }
});

// 删除图标按钮事件
document.getElementById('delete-icon').addEventListener('click', function() {
    // 显示确认删除浮层
    document.getElementById('confirm-overlay').style.display = 'flex';
    
    // 隐藏右键菜单
    document.getElementById('icon-context-menu').style.display = 'none';
});

// 带防抖的保存和渲染
const debouncedSaveAndRender = debounce(function() {
    if (dataManager.saveData(data)) {
        renderAll();
    }
}, 300);

// 渲染标签指示器
function renderTabIndicator() {
    const container = document.getElementById('tab-indicator');
    if (!container) return;
    
    container.innerHTML = '';
    
    if (data.tabs.length <= 1) {
        container.classList.add('hidden');
        return;
    } else {
        container.classList.remove('hidden');
    }
    
    // 创建指示器点
    const fragment = document.createDocumentFragment();
    
    data.tabs.forEach((tab, index) => {
        const dot = document.createElement('div');
        dot.className = 'indicator-dot';
        if (tab === currentTab) {
            dot.classList.add('active');
        }
        
        // 点击切换标签页
        dot.addEventListener('click', () => {
            if (tab !== currentTab) {
                currentTab = tab;
                renderAll();
            }
        });
        
        fragment.appendChild(dot);
    });
    
    container.appendChild(fragment);
}

// 渲染所有UI
function renderAll() {
    // 更新全局currentTab变量
    window.currentTab = currentTab;
    renderTabs(data, currentTab);
    renderIcons(data, currentTab);
    renderTabIndicator();
}

// 初始化

// 事件绑定
function setupEventListeners() {
    // 添加标签页
    const modalAddTabBtn = document.getElementById('modal-add-tab');
    if (modalAddTabBtn) {
        modalAddTabBtn.addEventListener('click', () => {
            const settingsModal = document.getElementById('settings-modal');
            if (settingsModal) {
                settingsModal.classList.add('hidden');
            }
            const name = prompt('请输入新标签页名称：');
            if (name && name.trim()) {
                addTab(name.trim());
            }
        });
    }
    
    // 模态框的关闭按钮事件
    const modalCancel = document.getElementById('modal-cancel');
    if (modalCancel) {
        modalCancel.addEventListener('click', function(e) {
            e.stopPropagation();
            closeModal();
        });
    }
    
    // 模态框表单提交事件
    const iconForm = document.getElementById('icon-form');
    if (iconForm) {
        iconForm.addEventListener('submit', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const nameInput = this.querySelector('[name="name"]');
            const urlInput = this.querySelector('[name="url"]');
            
            if (!nameInput.value.trim()) {
                showToast('请输入名称');
                nameInput.focus();
                return;
            }
            
            if (!urlInput.value.trim()) {
                showToast('请输入URL');
                urlInput.focus();
                return;
            }
            
            // 处理表单数据
            const iconType = document.querySelector('input[name="icon-type"]:checked').value;
            const descriptionInput = this.querySelector('[name="description"]');
            
            // 构建图标对象
            const iconData = {
                name: nameInput.value.trim(),
                url: urlInput.value.trim(),
                description: descriptionInput ? descriptionInput.value.trim() : ''
            };
            
            // 根据图标类型设置相应的属性
            if (iconType === 'emoji') {
                const selectedCover = document.getElementById('selected-cover');
                if (!selectedCover.value) {
                    // 查看是否有选择高亮的表情，但没有正确设置值
                    const selectedEmoji = document.querySelector('#emoji-picker .bg-blue-100');
                    if (selectedEmoji) {
                        // 自动修复：将选中的表情设置到隐藏字段
                        selectedCover.value = selectedEmoji.textContent;
                        console.log('自动修复: 发现选中表情但值未设置，已修复为:', selectedEmoji.textContent);
                    } else {
                        showToast('请选择一个表情');
                        return;
                    }
                }
                iconData.cover = selectedCover.value;
                console.log('保存表情图标:', iconData.cover);
            } else if (iconType === 'image') {
                const customImage = document.getElementById('custom-image');
                if (!customImage.value) {
                    showToast('请上传并裁剪图片');
                    return;
                }
                iconData.customImage = customImage.value;
                console.log('保存图片图标, 图片大小约:', Math.round(iconData.customImage.length/1024), 'KB');
            }
            
            // 保存图标
            if (window.editingIcon) {
                // 编辑现有图标
                if (iconManager.editIcon(data, window.editingIcon.tab, window.editingIcon.index, iconData)) {
                    // 保存数据并刷新
                    if (dataManager.saveData(data)) {
                        renderIcons(data, currentTab);
                        closeModal();
                        showToast('编辑成功');
                    }
                }
            } else {
                // 添加新图标
                if (iconManager.addIcon(data, currentTab, iconData)) {
                    // 保存数据并刷新
                    if (dataManager.saveData(data)) {
                        renderIcons(data, currentTab);
                        closeModal();
                        showToast('添加成功');
                    }
                }
            }
        });
    }
    
    // 删除按钮事件
    const deleteBtn = document.getElementById('modal-delete');
    if (deleteBtn) {
        deleteBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            
            if (!window.editingIcon) return;
            
            if (confirm('确定要删除这个导航图标吗？此操作不可恢复。')) {
                // 从数组中移除图标
                if (iconManager.deleteIcon(data, window.editingIcon.tab, window.editingIcon.index)) {
                    if (dataManager.saveData(data)) {
                        renderIcons(data, currentTab);
                        closeModal();
                        showToast('删除成功');
                    }
                }
            }
        });
    }
    
    // 增强上传图片按钮事件
    const uploadButton = document.getElementById('upload-button');
    const uploadInput = document.getElementById('upload-image');
    
    if (uploadButton && uploadInput) {
        uploadButton.addEventListener('click', function(e) {
            e.stopPropagation();
            uploadInput.click();
        });
        
        uploadInput.addEventListener('change', function(e) {
            e.stopPropagation();
            if (e.target.files && e.target.files[0]) {
                const file = e.target.files[0];
                openCropModal(file);
            }
        });
    }
    
    // 增强更换图片按钮事件
    const changeImageBtn = document.getElementById('change-image');
    if (changeImageBtn && uploadInput) {
        changeImageBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('点击更换图片按钮');
            uploadInput.click();
        });
    }
    
    // Emoji选择
    const emojiPicker = document.getElementById('emoji-picker');
    if (emojiPicker) {
        emojiPicker.addEventListener('click', (e) => {
            if (e.target.classList.contains('emoji-option')) {
                // 清除其他选中状态
                document.querySelectorAll('#emoji-picker .emoji-option').forEach(opt => {
                    opt.classList.remove('bg-blue-100');
                });
                // 设置当前选中
                e.target.classList.add('bg-blue-100');
                
                // 设置选中的表情到隐藏字段
                const selectedCover = document.getElementById('selected-cover');
                if (selectedCover) {
                    selectedCover.value = e.target.textContent;
                    console.log('选中表情:', e.target.textContent);
                }
            }
        });
    }
    
    // 模态框事件已在modalManager中处理
    
    // 导出导入功能已在setupSettingsModalEvents中处理
    
    // 键盘事件
    document.addEventListener('keydown', (e) => {
        // ESC关闭弹窗
        if (e.key === 'Escape') {
            closeModal();
        }
    });
    
    // 系统设置模态框事件已在setupSettingsModalEvents中处理
}

// 全局添加标签页函数
function addTab(name) {
    if (!name) return;
    
    if (validateTabName(name)) {
        if (data.tabs.includes(name)) {
            showToast('标签页名称已存在');
            return false;
        } else {
            if (tabManager.addTab(data, name)) {
                currentTab = tabManager.getCurrentTab();
                if (dataManager.saveData(data)) {
                    renderAll();
                    showToast(`已创建"${name}"标签页`);
                    return true;
                }
            }
        }
    } else {
        showToast('标签页名称不符合要求');
        return false;
    }
}

// 弹窗相关
function openModal(iconData = null, index = null, sourceTab = null) {
    modalManager.openIconModal(iconData, index, sourceTab);
}

function closeModal() {
    modalManager.closeIconModal();
}

function exportData() {
    dataIO.exportData(data);
}

function importData(file) {
    if (dataIO.importData(file, data)) {
        currentTab = data.tabs[0];
        renderAll();
    }
}

function showIconOptions(type) {
    modalManager.showIconOptions(type);
}

function toggleImageUpload(show) {
    modalManager.toggleImageUpload(show);
}

function openCropModal(file) {
    imageProcessor.openCropModal(file);
}

function confirmCrop() {
    imageProcessor.confirmCrop();
}

function closeCropModal() {
    imageProcessor.closeCropModal();
}

// 设置滑动手势
function setupSwipeGestures() {
    const container = document.getElementById('content-container');
    if (!container) return;
    
    let touchStartX = 0;
    let touchEndX = 0;
    let touchStartY = 0;
    let mouseStartX = 0;
    let mouseEndX = 0;
    let mouseStartY = 0;
    let isDragging = false;
    let isHorizontalSwipe = false;
    let swipeThreshold = 30; // 降低触发阈值，使滑动更容易触发
    let isAnimating = false; // 防止动画过程中触发新的滑动
    
    // 检查是否应该忽略滑动事件
    function shouldIgnoreSwipe(target) {
        if (isAnimating) return true;
        // 如果是拖拽图标元素，不处理滑动（但排除添加导航按钮）
        const draggable = target.closest('.draggable');
        if (draggable && !draggable.querySelector('.text-xs')?.textContent?.includes('添加导航')) {
            return true;
        }
        return false;
    }
    
    // 触摸事件（移动设备单指滑动）- 监听整个文档
    document.addEventListener('touchstart', function(e) {
        if (shouldIgnoreSwipe(e.target)) return;
        
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
        isHorizontalSwipe = false;
    }, {passive: true});
    
    document.addEventListener('touchmove', function(e) {
        if (shouldIgnoreSwipe(e.target)) return;
        
        const touchCurrentX = e.touches[0].clientX;
        const touchCurrentY = e.touches[0].clientY;
        const diffX = Math.abs(touchCurrentX - touchStartX);
        const diffY = Math.abs(touchCurrentY - touchStartY);
        
        if (!isHorizontalSwipe && diffX > 10 && diffX > diffY * 1.2) {
            isHorizontalSwipe = true;
        }
        
        if (isHorizontalSwipe) {
            e.preventDefault();
            
            if (data.tabs.length > 1) {
                const direction = touchCurrentX < touchStartX ? 'left' : 'right';
                showSwipeEffect(direction, diffX);
            }
        }
    }, {passive: false});
    
    document.addEventListener('touchend', function(e) {
        if (shouldIgnoreSwipe(e.target)) return;
        
        touchEndX = e.changedTouches[0].clientX;
        
        if (isHorizontalSwipe) {
            handleSwipe(touchStartX, touchEndX);
        }
        
        resetSwipeEffect();
        isHorizontalSwipe = false;
    }, {passive: true});
    
    // 检查鼠标事件是否应该忽略
    function shouldIgnoreMouseSwipe(e) {
        if (isAnimating || e.button !== 0) return true;
        // 只响应主鼠标按钮（左键）点击，且不是拖动图标时
        const draggable = e.target.closest('.draggable');
        const isAddNav = draggable?.querySelector('.text-xs')?.textContent?.includes('添加导航');
        const isSystemSettings = draggable?.querySelector('.text-xs')?.textContent?.includes('系统设置');
        
        if (draggable && (!isAddNav && !isSystemSettings)) {
            return true;
        }
        return false;
    }
    
    // 鼠标事件（PC拖动模拟滑动）
    document.addEventListener('mousedown', function(e) {
        if (shouldIgnoreMouseSwipe(e)) return;
        
        mouseStartX = e.clientX;
        mouseStartY = e.clientY;
        isDragging = true;
        isHorizontalSwipe = false;
        e.preventDefault();
    }, {passive: false});
    
    document.addEventListener('mousemove', function(e) {
        if (!isDragging || isAnimating) return;
        
        const diffX = Math.abs(e.clientX - mouseStartX);
        const diffY = Math.abs(e.clientY - mouseStartY);
        
        if (!isHorizontalSwipe && diffX > 10 && diffX > diffY * 1.2) {
            isHorizontalSwipe = true;
        }
        
        if (isHorizontalSwipe) {
            e.preventDefault();
            
            if (data.tabs.length > 1) {
                const direction = e.clientX < mouseStartX ? 'left' : 'right';
                showSwipeEffect(direction, diffX);
            }
        }
    }, {passive: false});
    
    document.addEventListener('mouseup', function(e) {
        if (!isDragging || isAnimating) return;
        
        mouseEndX = e.clientX;
        
        if (isHorizontalSwipe) {
            handleSwipe(mouseStartX, mouseEndX);
        }
        
        isDragging = false;
        isHorizontalSwipe = false;
        resetSwipeEffect();
    });
    
    // 确保鼠标离开窗口或ESC键也能结束拖动
    document.addEventListener('mouseleave', function() {
        if (isDragging) {
            isDragging = false;
            isHorizontalSwipe = false;
            resetSwipeEffect();
        }
    });
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && isDragging) {
            isDragging = false;
            isHorizontalSwipe = false;
            resetSwipeEffect();
        }
    });
    
    // 显示滑动视觉效果
    function showSwipeEffect(direction, distance) {
        const maxTranslate = 100; // 最大平移距离
        const translateX = Math.min(distance / 1.5, maxTranslate); // 减小除数使动画更快跟随手指
        
        if (container) {
            container.style.transition = 'transform 0.05s ease-out'; // 减少过渡时间，使效果更加即时
            container.style.transform = `translateX(${direction === 'right' ? translateX : -translateX}px)`;
            container.style.opacity = 1 - (translateX / 300); // 减小不透明度变化
            // 防止滚动条出现
            document.body.style.overflow = 'hidden';
        }
    }
    
    // 重置滑动效果
    function resetSwipeEffect() {
        if (container) {
            container.style.transition = 'transform 0.2s ease, opacity 0.2s ease'; // 减少回弹时间
            container.style.transform = '';
            container.style.opacity = '';
            // 恢复滚动行为
            setTimeout(() => {
                document.body.style.overflow = '';
            }, 200); // 等待动画完成后恢复
        }
    }
    
    // 处理双指触控板滑动
    document.addEventListener('wheel', function(e) {
        // 如果正在动画中，不处理新的滑动
        if (isAnimating) return;
        
        // 检查是否应该忽略滑动（如果在拖拽图标上）
        if (shouldIgnoreSwipe(e.target)) return;
        
        // 检测水平滚动，但要确保不是浏览器的前进后退手势
        // 只有在明确的水平滑动且不是系统手势时才处理
        if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 30) {
            // 防止浏览器的前进后退手势
            e.preventDefault();
            e.stopPropagation();
            
            // 设置动画状态为true，防止连续滑动
            isAnimating = true;
            
            // deltaX > 0 表示向右滑动（手指从左向右）-> 切换到右边标签页
            // deltaX < 0 表示向左滑动（手指从右向左）-> 切换到左边标签页
            if (e.deltaX > 0) {
                // 向右滑动 - 切换到右边标签页
                switchToTab('prev');
            } else {
                // 向左滑动 - 切换到左边标签页
                switchToTab('next');
            }
            
            // 动画完成后重置状态
            setTimeout(() => {
                isAnimating = false;
            }, 600); // 动画时间为300ms，等待两倍时间以确保动画完全结束
        }
    }, {passive: false});
    
    // 处理滑动方向切换标签页
    function handleSwipe(startX, endX) {
        const diff = Math.abs(endX - startX);
        
        // 如果滑动距离超过阈值，触发标签切换
        if (diff >= swipeThreshold) {
            isAnimating = true; // 设置动画状态为true，防止连续滑动
            
            if (endX < startX) {
                // 手指从右向左滑动 -> 切换到左边的标签页
                switchToTab('next');
            } else {
                // 手指从左向右滑动 -> 切换到右边的标签页
                switchToTab('prev');
            }
            
            // 动画完成后重置状态
            setTimeout(() => {
                isAnimating = false;
            }, 400); // 减少等待时间，提高响应速度
        } else {
            // 滑动距离不足，重置滑动效果
            resetSwipeEffect();
        }
    }
    

}

// 切换到上一个或下一个标签页
function switchToTab(direction) {
    if (data.tabs.length <= 1) return;
    
    const currentIndex = data.tabs.indexOf(currentTab);
    let newIndex;
    
    if (direction === 'next') {
        // 从左向右滑动 -> 切换到左边的标签页
        // 正常情况下向左移动一个标签页
        newIndex = (currentIndex - 1 + data.tabs.length) % data.tabs.length;
        
        // 特殊情况：从首页 -> ALL页
        if (currentTab === '首页') {
            newIndex = data.tabs.indexOf('ALL');
        }
    } else { // 'prev'
        // 从右向左滑动 -> 切换到右边的标签页
        // 正常情况下向右移动一个标签页
        newIndex = (currentIndex + 1) % data.tabs.length;
        
        // 特殊情况：从最后一页 -> ALL页
        if (currentIndex === data.tabs.length - 1) {
            newIndex = data.tabs.indexOf('ALL');
        }
    }
    
    // 检查是否真正更换了标签页
    if (data.tabs[newIndex] !== currentTab) {
        const oldTab = currentTab;
        currentTab = data.tabs[newIndex];
        // 更新全局变量
        window.currentTab = currentTab;
        
        // 使用更流畅的滑动动画效果
        const contentContainer = document.getElementById('content-container');
        if (contentContainer) {
            // 设置滑动方向和时长
            // 向prev方向(左)滑动时，页面内容应向右移动(正值)
            // 向next方向(右)滑动时，页面内容应向左移动(负值)
            const slideDirection = direction === 'prev' ? 1 : -1;
            const animationDuration = 250; // 缩短动画时长
            
            // 初始位置
            contentContainer.style.transition = 'none';
            contentContainer.style.transform = 'translateX(0)';
            contentContainer.style.opacity = '1';
            
            // 强制回流
            contentContainer.offsetHeight;
            
            // 开始滑出
            contentContainer.style.transition = `transform ${animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity ${animationDuration}ms ease`;
            contentContainer.style.transform = `translateX(${slideDirection * -40}%)`;
            contentContainer.style.opacity = '0.3';
            
            // 渲染新内容
            setTimeout(() => {
                // 更新高亮指示器，避免随内容一起滑动
                renderTabIndicator();
                
                // 仅渲染标签和图标，不重新渲染指示器
                renderTabs(data, currentTab);
                renderIcons(data, currentTab);
                
                // 准备从另一侧滑入
                contentContainer.style.transition = 'none';
                contentContainer.style.transform = `translateX(${slideDirection * 40}%)`;
                contentContainer.style.opacity = '0.3';
                
                // 强制回流
                contentContainer.offsetHeight;
                
                // 滑入
                contentContainer.style.transition = `transform ${animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity ${animationDuration}ms ease`;
                contentContainer.style.transform = 'translateX(0)';
                contentContainer.style.opacity = '1';
            }, animationDuration * 0.8); // 减少等待时间，使动画更连贯
        } else {
            // 仅渲染标签和图标，不重新渲染指示器
            renderTabs(data, currentTab);
            renderIcons(data, currentTab);
            // 单独更新标签指示器
            renderTabIndicator();
        }
    }
}

// 设置系统设置模态框事件
function setupSettingsModalEvents() {
    // 系统设置模态框事件处理
    const settingsModal = document.getElementById('settings-modal');
    const closeSettingsBtn = document.getElementById('close-settings');
    // modalAddTabBtn已经在setupEventListeners中声明和处理
    
    // 关闭系统设置模态框
    if (closeSettingsBtn && settingsModal) {
        closeSettingsBtn.addEventListener('click', () => {
            settingsModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        settingsModal.addEventListener('click', (e) => {
            if (e.target === settingsModal) {
                settingsModal.classList.add('hidden');
            }
        });
    }
    
    // 新增标签页功能已在setupEventListeners中处理
    
    // 导出数据功能
    const modalExportBtn = document.getElementById('modal-export-data');
    if (modalExportBtn) {
        modalExportBtn.addEventListener('click', function() {
            const settingsModal = document.getElementById('settings-modal');
            if (settingsModal) {
                settingsModal.classList.add('hidden');
            }
            exportData();
        });
    }
    
    // 导入数据功能
    const modalImportBtn = document.getElementById('modal-import-data');
    const modalImportFile = document.getElementById('modal-import-file');
    if (modalImportBtn && modalImportFile) {
        modalImportBtn.addEventListener('click', function() {
            const settingsModal = document.getElementById('settings-modal');
            if (settingsModal) {
                settingsModal.classList.add('hidden');
            }
            modalImportFile.click();
        });
        
        modalImportFile.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                importData(file);
                // 重置input，以便能够重复导入相同文件
                modalImportFile.value = '';
            }
        });
    }
}

// 初始化应用
function init() {
    setupEventListeners();

    setupSwipeGestures();
    setupSettingsModalEvents(); // 添加系统设置模态框事件
    
    // 初始化图片上传事件
    imageProcessor.setupImageUploadEvents();
    
    // 使用setTimeout确保DOM完全加载
    setTimeout(() => {
        renderAll();

    }, 0);
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}